<!-- 表单组件 -->
<template>
  <div class="flex-full form-table">
    <el-form
      :model="value.data"
      :disabled="value.disabled"
      ref="formTable"
      :label-width="value.width ? value.width : '100px'"
    >
      <el-row v-for="(rowData, $index) in propRules" :key="$index">
        <el-col
          v-for="(row, index) in rowData.dataProp"
          :span="rowData.span[index]"
          :key="index"
        >
          <div v-for="inputCell in row" :key="inputCell.prop">
            <el-form-item
              :label="inputCell.label"
              :prop="inputCell.prop"
              :rules="inputCell.rules"
            >
              <!-- label -->
              <span v-if="inputCell.type === 'label'">{{
                value.data[inputCell.prop]
              }}</span>
              <!-- 输入框 -->
              <el-input
                v-if="inputCell.type === 'text'"
                v-model.trim="value.data[inputCell.prop]"
                :type="inputCell.inputType || 'text'"
                :disabled="inputCell.disabled"
                :maxlength="inputCell.maxlength"
                :placeholder="inputCell.placeholder || '请输入'"
              >
              </el-input>

              <!-- 密码输入框 -->
              <el-input
                v-if="inputCell.type === 'password'"
                v-model.trim="value.data[inputCell.prop]"
                show-password
                :maxlength="inputCell.maxlength"
                :placeholder="inputCell.placeholder || '请输入'"
              >
              </el-input>

              <!-- 后置单位输入框 -->
              <el-input
                v-if="inputCell.type === 'suffix'"
                v-model.trim="value.data[inputCell.prop]"
                :maxlength="inputCell.maxlength"
                :type="inputCell.inputType || 'text'"
                :disabled="inputCell.disabled"
                :placeholder="inputCell.placeholder || '请输入'"
              >
                <i slot="suffix">{{ inputCell.unit }}</i>
              </el-input>

              <!-- 带下拉输入框 -->
              <el-input
                v-if="inputCell.type === 'inputselect'"
                v-model.trim="value.data[inputCell.prop]"
                :type="inputCell.inputType || 'text'"
                :placeholder="inputCell.placeholder || '请输入'"
                class="input-with-select"
              >
                <el-select
                  v-model="value.data[inputCell.prop2]"
                  slot="prepend"
                  placeholder="请选择"
                  style="width: 100px"
                >
                  <el-option
                    v-for="(option, index) in inputCell.options"
                    :key="index"
                    :label="option[inputCell.option_label] || option.label"
                    :value="option[inputCell.option_value] || option.value"
                  >
                  </el-option>
                </el-select>
              </el-input>

              <!-- 时间选择 -->
              <el-date-picker
                v-if="inputCell.type === 'date'"
                type="date"
                v-model="value.data[inputCell.prop]"
                :format="inputCell.format || 'yyyy-MM-dd'"
              >
              </el-date-picker>

              <!-- 时间段选择 -->
              <el-date-picker
                v-if="inputCell.type === 'daterange'"
                type="daterange"
                v-model="value.data[inputCell.prop]"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :format="inputCell.format || 'yyyy-MM-dd'"
              >
              </el-date-picker>

              <!-- 下拉框 -->
              <el-select
                v-model="value.data[inputCell.prop]"
                v-if="inputCell.type === 'select'"
                :disabled="!!inputCell.disabled"
                :placeholder="inputCell.placeholder || '请选择'"
              >
                <el-option
                  v-for="(option, index) in inputCell.options"
                  :key="index"
                  :label="option[inputCell.option_label] || option.label"
                  :value="option[inputCell.option_value] || option.value"
                >
                </el-option>
              </el-select>

              <!-- 文本域 -->
              <el-input
                v-if="inputCell.type === 'textarea'"
                v-model.trim="value.data[inputCell.prop]"
                :rows="inputCell.rows || 5"
                type="textarea"
                :maxlength="inputCell.maxlength"
                show-word-limit
              >
              </el-input>

              <!-- 单选组 -->
              <el-radio-group
                v-if="inputCell.type === 'radio'"
                v-model="value.data[inputCell.prop]"
              >
                <el-radio
                  v-for="(item, index) in inputCell.radioList"
                  :key="index"
                  :label="item[inputCell.radio_value] || item.value"
                >
                  {{ item[inputCell.radio_label] || item.label }}
                </el-radio>
              </el-radio-group>

              <!-- 上传 -->
              <el-upload
                v-if="inputCell.type === 'upload'"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>

              <!-- 复选框组 -->
              <el-checkbox-group
                v-if="inputCell.type === 'checkbox'"
                v-model="value.data[inputCell.prop]"
              >
                <el-checkbox
                  v-for="(item, index) in inputCell.checkboxList"
                  :key="index"
                  :label="item[inputCell.checkbox_value] || item.value"
                  :name="inputCell.prop"
                >
                  {{ item[inputCell.checkbox_label] || item.label }}
                </el-checkbox>
              </el-checkbox-group>

              <!-- 图片展示 -->
              <!-- <div
                :class="temp.style.show_picture"
                v-if="inputCell.type === 'picture'"
              >
                <img
                  :class="temp.style.show_title"
                  :src="value.data[inputCell.prop]"
                  alt=""
                  v-if="value.data[inputCell.prop]"
                />
                <img
                  :class="temp.style.show_title"
                  src="../../../assets/image/nopic.png"
                  alt=""
                  v-else
                />
              </div> -->

              <!-- 单选组 -->
              <!-- <el-radio-group
                v-if="inputCell.type === 'radio'"
                v-model="value.data[inputCell.prop]"
              >
                <el-radio
                  v-for="(item, index) in inputCell.radioList"
                  :key="index"
                  :label="item[inputCell.radio_value] || item.value"
                >
                  {{ item[inputCell.radio_label] || item.label }}
                </el-radio>
              </el-radio-group> -->

              <!-- 复选框组 -->
              <!-- <el-checkbox-group
                v-if="inputCell.type === 'checkbox'"
                v-model="value.data[inputCell.prop]"
              >
                <el-checkbox
                  v-for="(item, index) in inputCell.checkboxList"
                  :key="index"
                  :label="item[inputCell.checkbox_value] || item.value"
                  :name="inputCell.prop"
                >
                  {{ item[inputCell.checkbox_label] || item.label }}
                </el-checkbox>
              </el-checkbox-group> -->
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class FormTable extends Vue {
  get propRules() {
    const data = this.validatFunc(this.value.config);
    // console.log('propRules', data);
    return data;
  }
  @Prop()
  private value: any;
  //   private formData: any = {
  //     width: '120px',
  //     disabled: false,
  //     data: {
  //       name: '张三',
  //       age: 18,
  //       sex: '男',
  //       unit: '测试',
  //       duty: '初级测试',
  //       birth: new Date(),
  //       politics: 0,
  //       time: null,
  //       remarks: `二十九、睡前总是忍不住打一把游戏，输了不甘心睡不着，赢了太激动睡不着，算了再来一把。

  // 三十、每年情人节这个日子，总会有人捧着一大束花在我身后说：让一下，小心别碰到。

  // 三十一、如果把我的人生拍成一部电影，那么电影名我已经想好了，就叫穷极一生。

  // 三十二、当我说“随便”的时候，我的意思是：我懒得去想，也想不出好的，虽然是让你看着办，但你一定要想出我满意的才行。

  // 三十三、每次过年人家给我红包都要推来推去的，其实吧我真怕这样一推就真的给推走了。`
  //     },
  //     config: [
  //       {
  //         span: [12, 12],
  //         dataProp: [
  //           [
  //             {
  //               label: '姓名:',
  //               prop: 'name',
  //               type: 'text',
  //               requireType: ['required'],
  //               message: '请输入姓名'
  //             },
  //             {
  //               label: '年龄:',
  //               prop: 'age',
  //               type: 'suffix',
  //               unit: '岁'
  //             },
  //             {
  //               label: '性别:',
  //               prop: 'sex',
  //               type: 'text'
  //             },
  //             {
  //               label: '政治面貌:',
  //               prop: 'politics',
  //               type: 'select',
  //               option_label: 'name',
  //               option_value: 'value',
  //               options: [
  //                 { name: '团员', value: 0 },
  //                 { name: '党员', value: 1 }
  //               ]
  //             }
  //           ],
  //           [
  //             {
  //               label: '部门:',
  //               prop: 'unit',
  //               type: 'text'
  //             },
  //             {
  //               label: '出生日期:',
  //               prop: 'birth',
  //               type: 'date',
  //               format: 'yyyy-MM-dd'
  //             },
  //             {
  //               label: '职务:',
  //               prop: 'duty',
  //               type: 'text'
  //             },
  //             {
  //               label: '时间段:',
  //               prop: 'time',
  //               type: 'daterange'
  //             }
  //           ]
  //         ]
  //       },
  //       {
  //         span: [24],
  //         dataProp: [
  //           [
  //             {
  //               label: '备注:',
  //               prop: 'remarks',
  //               type: 'textarea',
  //               rows: 6,
  //               maxlength: 500
  //             }
  //           ]
  //         ]
  //       }
  //     ]
  //   };
  private dialogImageUrl = '';
  private dialogVisible = false;
  @Watch('value', { deep: true })
  public watchFormdata(val: any) {
    if (val) {
      this.$emit('input', val);
    }
  }
  private validatFunc(data: any) {
    data.forEach((item: any) => {
      if (item.dataProp) {
        this.validatFunc(item.dataProp);
      } else if (item instanceof Array) {
        this.validatFunc(item);
      } else {
        this.$set(item, 'rules', []);
        if (item.requireType) {
          item.requireType.forEach((el: any) => {
            // console.log('el', el);
            if (el instanceof RegExp) {
              item.rules.push({
                validator: (rule: any, value: any, callback: any) => {
                  if (value) {
                    const dataVal = el.test(value);
                    if (!dataVal) {
                      return callback(
                        new Error(
                          item.message ? item.message : '请输入正确格式'
                        )
                      );
                    } else {
                      return callback();
                    }
                  } else {
                    return callback();
                  }
                },
                trigger: ['change', 'blur'],
              });
            } else if (el instanceof Function) {
              item.rules.push({ validator: el });
            } else {
              switch (el) {
                case 'required':
                  item.rules.push({
                    required: true,
                    message: item.message || '该字段不能为空',
                    trigger: ['blur', 'change'],
                  });
                  break;
                case 'length':
                  item.rules.push({
                    max: item.maxlength,
                    message: `长度最大为${item.maxlength}`,
                    trigger: ['blur', 'change'],
                  });
                  break;
              }
            }
          });
        }
      }
    });
    return data;
  }
  private handleRemove(file: any, fileList: any) {
    // console.log(file, fileList);
  }
  private handlePictureCardPreview(file: any) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  }
}
</script>

<style scoped lang="less"></style>
